<template>
  <view class="body">
    <image class="bg" src="https://ainengli.hzjrsw.com/jkhx/physicalBg.png"></image>
    <view class="base_info">
      <image
        v-if="patientInfo.gender == '女性'"
        class="avatar"
        src="@/static/image/hmm/woman.png"
      />
      <image v-else class="avatar" src="@/static/image/hmm/man.png" />
      <view class="right_info">
        <view class="baseinfo">
          <view style="max-width: 300rpx;">
            <text class="name">{{ patientInfo.patName }}</text>
            <text class="sex">{{ patientInfo.gender }}</text>
            <text class="age">{{ patientInfo.age }}岁</text>
          </view>
          <view class="switch" @tap="visitFun">
            <text>其他就诊人</text>
            <image class="img_switch" src="@/static/image/raozg/green_more.png" />
          </view>
        </view>
        <view class="id_card">证件号 | {{ patientInfo.idNo }}</view>
      </view>
    </view>
    <up-popup :show="show" :round="16" mode="bottom" closeable @close="show = false">
      <view class="title">选择就诊人</view>
      <view class="lists_patient">
        <view
          v-for="(item, index) of patientList"
          :key="index"
          @click="select(item)"
          :class="['item', patientInfo.empi == item.empi ? 'active' : '']"
        >
          <view class="name">{{ item.patName }}</view>
          <view class="num">{{ item.gender }} | {{ item.age }}岁</view>
          <image
            v-if="patientInfo.empi == item.empi"
            class="select_img"
            src="@/static/image/raozg/select.png"
          />
        </view>
      </view>
    </up-popup>
    <view class="follows" v-if="followList && followList.length > 0">
      <view v-for="(item, index) of followList" :key="index" class="follow_item">
        <view v-if="item.isRead" class="tags">已提交</view>
        <view class="item_top">
          <image class="img_avatar" src="@/static/image/raozg/follow_avatar.png" />
          <view class="title">{{ item.itemName }}</view>
        </view>
        <view class="item_bottom">
          <view class="date">{{
            item.planTime
              ? transformTimeTwo(
                  new Date(item.planTime.replace(/\-/g, '/')).getTime(),
                  'minutesdd'
                ).replace(/\//g, '-')
              : ''
          }}</view>
          <view @tap="toDetail(item)" class="detail">
            查看详情
            <image class="img_more" src="@/static/image/raozg/more.png" />
          </view>
        </view>
      </view>
    </view>
    <view v-else class="nodate">
      <img class="img" src="https://ainengli.hzjrsw.com/jkhx/noData.png" alt="" />
      <view class="nodate_text">
        <text class="name">暂无数据</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { query_patient } from '@/api/family'
import { getFollowList } from '@/api/follow'
import { transformTimeTwo } from '@/utils/hmm'
import store from '@/store'

const userInfo = ref({})
const patientInfo = ref({})
const show = ref(false)

const patientList = ref([])
const followList = ref([])

onLoad(() => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
  patientInfo.value = JSON.parse(uni.getStorageSync('userInfo')).patientInfo
  query_patient(userInfo.value.userId).then((res) => {
    patientList.value = res.data
  })
})

onShow(() => {
  getList()
})

const getList = () => {
  let params = {
    userId: userInfo.value.userId,
    empi: patientInfo.value.empi
  }
  getFollowList(params).then((res) => {
    followList.value = res.data
  })
}

const toDetail = (item: any) => {
  store.commit('SET_FOLLOW', item)
  if (item.isRead) {
    uni.navigateTo({
      url: '/packA/pages/follows/detail?name=' + item.itemName + '&type=' + 'read'
    })
  } else if (item.dateStatus == 0) {
    uni.navigateTo({
      url: '/packA/pages/follows/detail?name=' + item.itemName + '&type=' + 'timeout'
    })
  } else {
    uni.navigateTo({
      url: '/packA/pages/follows/fillin?name=' + item.itemName
    })
  }
}
const visitFun = () => {
  show.value = true
}
const select = (item) => {
  patientInfo.value = item
  getList()
  show.value = false
}
</script>

<style lang="scss" scoped>
.body {
  padding: 24rpx 32rpx;
  box-sizing: border-box;
  background: #f3f7f8;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 750rpx;
    height: 322rpx;
    z-index: 1;
  }
  .base_info {
    background: #ffffff;
    box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(173, 211, 205, 0.33);
    border-radius: 16rpx;
    padding: 48rpx 32rpx;
    display: flex;
    gap: 24rpx;
    position: relative;
    z-index: 2;
    .avatar {
      width: 84rpx;
      height: 84rpx;
    }
    .right_info {
      width: calc(100% - 108rpx);
      .baseinfo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name {
          font-weight: 500;
          font-size: 36rpx;
          color: #222222;
        }
        .sex {
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          margin-left: 20rpx;
        }
        .age {
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          margin-left: 20rpx;
        }
        .switch {
          height: 52rpx;
          padding: 8rpx 24rpx;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          background: rgba(0, 209, 182, 0.05);
          border-radius: 24rpx;
          border: 1rpx solid #00d1b6;
          font-weight: 500;
          font-size: 24rpx;
          color: #00d1b6;
          .img_switch {
            width: 28rpx;
            height: 28rpx;
          }
        }
      }
      .id_card {
        display: inline-block;
        border-radius: 4rpx;
        border: 1rpx solid #e5e6eb;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        padding: 2rpx 20rpx;
        box-sizing: border-box;
        margin-top: 18rpx;
      }
    }
  }
  .u-popup {
    .title {
      height: 108rpx;
      line-height: 108rpx;
      text-align: center;
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
      border-bottom: 1px solid #e5e6eb;
    }
    .lists_patient {
      padding: 32rpx;
      max-height: 800rpx;
      overflow: auto;
      .item {
        background: #fafafa;
        border-radius: 8rpx;
        padding: 24rpx;
        position: relative;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 24rpx;
        .name {
          font-weight: 500;
          font-size: 32rpx;
          color: #222222;
        }
        .num {
          display: inline-block;
          background: #ffffff;
          border-radius: 4rpx;
          padding: 6rpx 24rpx 8rpx;
          font-weight: 400;
          font-size: 24rpx;
          border: 1rpx solid #e5e6eb;
          background: #fff;
          transform: rotateZ(360deg);
          box-sizing: border-box;
          color: #666666;
          margin-left: 32rpx;
        }
        .select_img {
          position: absolute;
          top: 0;
          right: 0;
          width: 45rpx;
          height: 40rpx;
        }
      }
      .active {
        background: rgba(0, 209, 182, 0.1);
        border: 1rpx solid #00d1b6;
      }
    }
  }
  .follows {
    height: calc(100vh - 278rpx);
    box-sizing: border-box;
    overflow: auto;
    position: relative;
    margin-top: 24rpx;
    z-index: 2;
    .follow_item {
      background: #fff;
      border-radius: 16rpx;
      padding: 24rpx 32rpx;
      margin-bottom: 24rpx;
      position: relative;
      .tags {
        position: absolute;
        right: 0;
        top: 0;
        background: #00d1b6;
        border-radius: 0 16rpx 0 16rpx;
        width: 114rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        font-weight: 500;
        font-size: 22rpx;
        color: #fff;
      }
      .item_top {
        display: flex;
        justify-content: flex-start;
        gap: 24rpx;
        align-items: center;
        padding-bottom: 24rpx;
        border-bottom: 1rpx solid #e5e6eb;
        .img_avatar {
          width: 64rpx;
          height: 64rpx;
        }
        .title {
          font-weight: 500;
          font-size: 32rpx;
          color: #222;
        }
      }
      .item_bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 26rpx;
        align-items: center;
        .date {
          font-weight: 400;
          font-size: 26rpx;
          color: #666;
        }
        .detail {
          font-weight: 400;
          font-size: 28rpx;
          color: #999;
          .img_more {
            width: 32rpx;
            height: 32rpx;
            transform: translateY(6rpx);
          }
        }
      }
    }
  }
  .nodate {
    text-align: center;
    .img {
      display: inline-block;
      width: 320rpx;
      height: 240rpx;
      margin-top: 240rpx;
    }
    .nodate_text {
      .name {
        display: block;
        font-size: 28rpx;
        color: #666;
        text-align: center;
        margin-top: 10rpx;
      }
    }
  }
}
</style>
